<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Denzel - 几个有用的Web API——地理位置API</title>
    <meta name="description" content="前端笔记">
    <meta name="keywords" content="web前端,HTML5,CSS3,Javascript,SVG,canvas">
  <meta name="anthor" content="Denzel">
  <meta name="theme-color" content="#3eaf7c">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="msapplication-TileImage" content="/icons/msapplication-icon-144x144.png">
  <meta name="msapplication-TileColor" content="#000000">
  <link rel="icon" href="/blog/vuepress/logo.png">
  <link rel="manifest" href="/blog/vuepress/manifest.json">
  <link rel="apple-touch-icon" href="/blog/vuepress/icons/apple-touch-icon-152x152.png">
  <link rel="mask-icon" href="/blog/vuepress/icons/safari-pinned-tab.svg" color="#3eaf7c">
    
    <link rel="preload" href="/blog/vuepress/assets/css/0.styles.d4f29607.css" as="style"><link rel="preload" href="/blog/vuepress/assets/js/app.15770e34.js" as="script"><link rel="preload" href="/blog/vuepress/assets/js/25.20165510.js" as="script"><link rel="preload" href="/blog/vuepress/assets/js/56.e030a6b2.js" as="script"><link rel="preload" href="/blog/vuepress/assets/js/61.4ec3f2eb.js" as="script"><link rel="prefetch" href="/blog/vuepress/assets/js/46.59c0ece7.js"><link rel="prefetch" href="/blog/vuepress/assets/js/1.05e4270f.js"><link rel="prefetch" href="/blog/vuepress/assets/js/2.ace739f7.js"><link rel="prefetch" href="/blog/vuepress/assets/js/3.636e5a79.js"><link rel="prefetch" href="/blog/vuepress/assets/js/4.7a55aa4b.js"><link rel="prefetch" href="/blog/vuepress/assets/js/5.b56b0573.js"><link rel="prefetch" href="/blog/vuepress/assets/js/6.e9a3fbc8.js"><link rel="prefetch" href="/blog/vuepress/assets/js/7.aa46c47d.js"><link rel="prefetch" href="/blog/vuepress/assets/js/8.a9288ac6.js"><link rel="prefetch" href="/blog/vuepress/assets/js/9.b9f8dec6.js"><link rel="prefetch" href="/blog/vuepress/assets/js/10.3e2ea470.js"><link rel="prefetch" href="/blog/vuepress/assets/js/11.4d115f98.js"><link rel="prefetch" href="/blog/vuepress/assets/js/12.c97cf4d0.js"><link rel="prefetch" href="/blog/vuepress/assets/js/13.1e0cf594.js"><link rel="prefetch" href="/blog/vuepress/assets/js/14.bab9026a.js"><link rel="prefetch" href="/blog/vuepress/assets/js/15.1a24cffe.js"><link rel="prefetch" href="/blog/vuepress/assets/js/16.e9995850.js"><link rel="prefetch" href="/blog/vuepress/assets/js/17.86a1f7d2.js"><link rel="prefetch" href="/blog/vuepress/assets/js/18.c32400c4.js"><link rel="prefetch" href="/blog/vuepress/assets/js/19.9f99887c.js"><link rel="prefetch" href="/blog/vuepress/assets/js/20.82f0c2f9.js"><link rel="prefetch" href="/blog/vuepress/assets/js/21.7f5c223d.js"><link rel="prefetch" href="/blog/vuepress/assets/js/22.acf9934c.js"><link rel="prefetch" href="/blog/vuepress/assets/js/23.20d8e817.js"><link rel="prefetch" href="/blog/vuepress/assets/js/24.acf27379.js"><link rel="prefetch" href="/blog/vuepress/assets/js/26.83a2ddc3.js"><link rel="prefetch" href="/blog/vuepress/assets/js/27.33276a04.js"><link rel="prefetch" href="/blog/vuepress/assets/js/28.e320efab.js"><link rel="prefetch" href="/blog/vuepress/assets/js/29.3fd92c30.js"><link rel="prefetch" href="/blog/vuepress/assets/js/30.2bc84d43.js"><link rel="prefetch" href="/blog/vuepress/assets/js/31.d70ed500.js"><link rel="prefetch" href="/blog/vuepress/assets/js/32.e7a0f8e1.js"><link rel="prefetch" href="/blog/vuepress/assets/js/33.c48ee70b.js"><link rel="prefetch" href="/blog/vuepress/assets/js/34.8ad03d1b.js"><link rel="prefetch" href="/blog/vuepress/assets/js/35.5bdb3994.js"><link rel="prefetch" href="/blog/vuepress/assets/js/36.a25f926e.js"><link rel="prefetch" href="/blog/vuepress/assets/js/37.7515cfbb.js"><link rel="prefetch" href="/blog/vuepress/assets/js/38.99347371.js"><link rel="prefetch" href="/blog/vuepress/assets/js/39.3481fc62.js"><link rel="prefetch" href="/blog/vuepress/assets/js/40.bc709734.js"><link rel="prefetch" href="/blog/vuepress/assets/js/41.e1e0a3bf.js"><link rel="prefetch" href="/blog/vuepress/assets/js/42.762b61b0.js"><link rel="prefetch" href="/blog/vuepress/assets/js/43.8f0b2d6c.js"><link rel="prefetch" href="/blog/vuepress/assets/js/44.2a0a4ee0.js"><link rel="prefetch" href="/blog/vuepress/assets/js/45.baf7ed60.js"><link rel="prefetch" href="/blog/vuepress/assets/js/47.11a8720a.js"><link rel="prefetch" href="/blog/vuepress/assets/js/48.e0bf8b54.js"><link rel="prefetch" href="/blog/vuepress/assets/js/49.c96c4011.js"><link rel="prefetch" href="/blog/vuepress/assets/js/50.31189263.js"><link rel="prefetch" href="/blog/vuepress/assets/js/51.766a8294.js"><link rel="prefetch" href="/blog/vuepress/assets/js/52.26b971fd.js"><link rel="prefetch" href="/blog/vuepress/assets/js/53.0cfbd708.js"><link rel="prefetch" href="/blog/vuepress/assets/js/54.bdc15c87.js"><link rel="prefetch" href="/blog/vuepress/assets/js/55.fea285a9.js"><link rel="prefetch" href="/blog/vuepress/assets/js/57.bd168a1e.js"><link rel="prefetch" href="/blog/vuepress/assets/js/58.636557fa.js"><link rel="prefetch" href="/blog/vuepress/assets/js/59.5d1d0ce6.js"><link rel="prefetch" href="/blog/vuepress/assets/js/60.0b779f92.js"><link rel="prefetch" href="/blog/vuepress/assets/js/62.8f70f114.js"><link rel="prefetch" href="/blog/vuepress/assets/js/63.9ac2b61d.js"><link rel="prefetch" href="/blog/vuepress/assets/js/64.c028fad5.js"><link rel="prefetch" href="/blog/vuepress/assets/js/65.923a8d15.js"><link rel="prefetch" href="/blog/vuepress/assets/js/66.73db652e.js"><link rel="prefetch" href="/blog/vuepress/assets/js/67.1a91446d.js"><link rel="prefetch" href="/blog/vuepress/assets/js/68.e5a12a42.js"><link rel="prefetch" href="/blog/vuepress/assets/js/69.6ddcb882.js"><link rel="prefetch" href="/blog/vuepress/assets/js/70.ceb70d85.js"><link rel="prefetch" href="/blog/vuepress/assets/js/71.a804ef40.js"><link rel="prefetch" href="/blog/vuepress/assets/js/72.f1c4098c.js"><link rel="prefetch" href="/blog/vuepress/assets/js/73.2f28b842.js"><link rel="prefetch" href="/blog/vuepress/assets/js/74.571c2ab1.js"><link rel="prefetch" href="/blog/vuepress/assets/js/75.f365c2a1.js"><link rel="prefetch" href="/blog/vuepress/assets/js/76.0916a3cd.js"><link rel="prefetch" href="/blog/vuepress/assets/js/77.469aed17.js"><link rel="prefetch" href="/blog/vuepress/assets/js/78.02cdd59d.js"><link rel="prefetch" href="/blog/vuepress/assets/js/79.44d7f95c.js"><link rel="prefetch" href="/blog/vuepress/assets/js/80.4ca072f1.js"><link rel="prefetch" href="/blog/vuepress/assets/js/81.d9239a49.js"><link rel="prefetch" href="/blog/vuepress/assets/js/82.b09096b2.js"><link rel="prefetch" href="/blog/vuepress/assets/js/83.f4bc8a9b.js"><link rel="prefetch" href="/blog/vuepress/assets/js/84.1ffe6969.js"><link rel="prefetch" href="/blog/vuepress/assets/js/85.44e980f9.js"><link rel="prefetch" href="/blog/vuepress/assets/js/86.c8579ac0.js"><link rel="prefetch" href="/blog/vuepress/assets/js/87.cd49f324.js"><link rel="prefetch" href="/blog/vuepress/assets/js/88.3851b6ff.js"><link rel="prefetch" href="/blog/vuepress/assets/js/89.b05297be.js"><link rel="prefetch" href="/blog/vuepress/assets/js/90.c1e3263e.js"><link rel="prefetch" href="/blog/vuepress/assets/js/91.b493a1bb.js"><link rel="prefetch" href="/blog/vuepress/assets/js/92.80ab06fd.js"><link rel="prefetch" href="/blog/vuepress/assets/js/93.c6ca00b3.js"><link rel="prefetch" href="/blog/vuepress/assets/js/94.e993d310.js"><link rel="prefetch" href="/blog/vuepress/assets/js/95.8e19a7ed.js">
    <link rel="stylesheet" href="/blog/vuepress/assets/css/0.styles.d4f29607.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/blog/vuepress/" class="home-link router-link-active"><img src="/blog/vuepress/hero.png" class="logo"><span class="site-name can-hide">
      Denzel
    </span></a><div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""><!----></div><nav class="nav-links can-hide"><div class="nav-item"><a href="/blog/vuepress/js/" class="nav-link router-link-active">JS</a></div><div class="nav-item"><a href="/blog/vuepress/css/" class="nav-link">CSS</a></div><div class="nav-item"><a href="/blog/vuepress/html/" class="nav-link">HTML</a></div><div class="nav-item"><a href="/blog/vuepress/else/" class="nav-link">其他</a></div><div class="nav-item"><a href="/blog/vuepress/study/" class="nav-link">study</a></div><a href="https://github.com/xiaotianxia" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header><div class="sidebar-mask"></div><div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/blog/vuepress/js/" class="nav-link router-link-active">JS</a></div><div class="nav-item"><a href="/blog/vuepress/css/" class="nav-link">CSS</a></div><div class="nav-item"><a href="/blog/vuepress/html/" class="nav-link">HTML</a></div><div class="nav-item"><a href="/blog/vuepress/else/" class="nav-link">其他</a></div><div class="nav-item"><a href="/blog/vuepress/study/" class="nav-link">study</a></div><a href="https://github.com/xiaotianxia" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading open"><span>JS</span><!----></p><ul class="sidebar-group-items"><li><a href="/blog/vuepress/js/" class="sidebar-link">目录</a></li><li><a href="/blog/vuepress/js/four_kinds_of_observers.html" class="sidebar-link">JS中的观察者们 —— 四种 Observers</a></li><li><a href="/blog/vuepress/js/editable_dom.html" class="sidebar-link">可编辑的页面——designMode、contenteditable和user-modify</a></li><li><a href="/blog/vuepress/js/useful_webapis_mediarecorder.html" class="sidebar-link">用浏览器轻松录制音频、视频—— MediaRecorder API</a></li><li><a href="/blog/vuepress/js/useful_webapis_audiocontext.html" class="sidebar-link">让你的网页开口说话 —— audioContext API</a></li><li><a href="/blog/vuepress/js/useful_webapis_fullscreen.html" class="sidebar-link">几个有用的Web API——全屏模式</a></li><li><a href="/blog/vuepress/js/useful_webapis_notification.html" class="sidebar-link">几个有用的Web API——桌面通知API</a></li><li><a href="/blog/vuepress/js/useful_webapis_connection.html" class="sidebar-link">几个有用的Web API——网络状态API</a></li><li><a href="/blog/vuepress/js/useful_webapis_geolocation.html" class="active sidebar-link">几个有用的Web API——地理位置API</a></li><li><a href="/blog/vuepress/js/speech_in_js_recognition.html" class="sidebar-link">JS中的语音识别——Speech Recognition API</a></li><li><a href="/blog/vuepress/js/speech_in_js_synthesis.html" class="sidebar-link">JS中的语音合成——Speech Synthesis API</a></li><li><a href="/blog/vuepress/js/camera_in_js_trial.html" class="sidebar-link">JS控制设备摄像头初探</a></li><li><a href="/blog/vuepress/js/shape_detection_api_trial.html" class="sidebar-link">浏览器的图像识别API初探</a></li><li><a href="/blog/vuepress/js/simple_chatroom_using_socketio.html" class="sidebar-link">socket.io实现简单群聊</a></li><li><a href="/blog/vuepress/js/communication_using_postmessage.html" class="sidebar-link">postMessage实现父子页面简单通信</a></li><li><a href="/blog/vuepress/js/upload_using_filereader_createobjecturl.html" class="sidebar-link">FileReader与URL.createObjectURL实现图片、视频上传预览</a></li><li><a href="/blog/vuepress/js/simple_code_preview.html" class="sidebar-link">前端几行代码简单实现w3school代码预览</a></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="几个有用的web-api——地理位置api"><a href="#几个有用的web-api——地理位置api" aria-hidden="true" class="header-anchor">#</a> 几个有用的Web API——地理位置API</h1><p><a href="https://denzel.netlify.com/js/useful_webapis_geolocation.html?_=2345677654321" target="_blank" rel="noopener noreferrer">原文链接</a></p><h2 id="api用法——一个对象三个方法"><a href="#api用法——一个对象三个方法" aria-hidden="true" class="header-anchor">#</a> API用法——一个对象三个方法</h2><p>navigator.geolocation返回一个geolocation对象，该对象有一个方法getCurrentPosition()，该方法是一个异步请求，会去调Google的api，
所以可能需要翻墙，调用方法：</p><pre class="language-js"><code>navigator<span class="token punctuation">.</span>geolocation<span class="token punctuation">.</span><span class="token function">getCurrentPosition</span><span class="token punctuation">(</span>successCallback<span class="token punctuation">,</span> errorCallback<span class="token punctuation">,</span> options<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><p>successCallback定位成功后回调，返回一个position对象，其大概结构是这样的：
<img src="http://pn4meizzc.bkt.clouddn.com/blogWX20180528-105336.png" alt="geolocation对象"></p><pre class="language-js"><code>coords<span class="token punctuation">.</span>latitude<span class="token punctuation">:</span> 十进制数的纬度

coords<span class="token punctuation">.</span>longitude<span class="token punctuation">:</span> 十进制数的经度

coords<span class="token punctuation">.</span>accuracy<span class="token punctuation">:</span> 位置精度

coords<span class="token punctuation">.</span>altitude<span class="token punctuation">:</span> 海拔，海平面以上以米计

coords<span class="token punctuation">.</span>altitudeAccuracy<span class="token punctuation">:</span> 位置的海拔精度

coords<span class="token punctuation">.</span>heading<span class="token punctuation">:</span> 方向，从正北开始以度计

coords<span class="token punctuation">.</span>speed<span class="token punctuation">:</span> 速度，以米<span class="token operator">/</span>每秒计

timestamp<span class="token punctuation">:</span> 响应的日期<span class="token operator">/</span>时间
</code></pre><p>errorCallback定位失败时返回错误信息，大致这样：</p><p><img src="http://pn4meizzc.bkt.clouddn.com/WX20180528-110527.png" alt="geolocation对象"></p><pre class="language-js"><code>code<span class="token punctuation">:</span> 错误编码：
		<span class="token number">1</span><span class="token punctuation">:</span> 用户禁止了定位信息获取，
		<span class="token number">2</span><span class="token punctuation">:</span> 为网络不可用或连接卫星失败，
		<span class="token number">3</span><span class="token punctuation">:</span> 为获取定位所花费的时间过长，
		<span class="token number">0</span><span class="token punctuation">:</span> 为出现未知错误

message<span class="token punctuation">:</span> 错误信息
</code></pre><p>options是一些设置参数，可以设置最大超时时间等。</p><pre class="language-js"><code><span class="token punctuation">{</span>
  	enableHighAccuracy<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//是否尝试更精确地读取纬度和经度，移动设备上，这可能要使用手机上的GPS，这会消耗移动设备更多的电量，定位所需时间也会更长，默认为false</span>
  	maximumAge<span class="token punctuation">:</span> <span class="token number">30000</span><span class="token punctuation">,</span>  <span class="token comment">//缓存时间</span>
  	timeout<span class="token punctuation">:</span> <span class="token number">27000</span> <span class="token comment">//等待响应的最大时间，默认是0毫秒，表示无穷时间</span>
<span class="token punctuation">}</span>
</code></pre><p>除此之外，navigator.geolocation还有两个有用的方法：watchPosition和clearWatch。
前者是一个跟踪器，可根据设备的地理位置异步返回实时位置信息，实现实时位置追踪，调用方式与getCurrentPosition一样。
该方法返回唯一的watcher ID，可用clearWatch(ID)关掉追，有点像setInterval和clearInterval的工作方式。</p><pre class="language-js"><code><span class="token keyword">var</span> watcherId <span class="token operator">=</span> navigator<span class="token punctuation">.</span>geolocation<span class="token punctuation">.</span><span class="token function">watchPosition</span><span class="token punctuation">(</span>successCallback<span class="token punctuation">,</span> errorCallback<span class="token punctuation">,</span> options<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//启动追踪</span>

navigator<span class="token punctuation">.</span>geolocation<span class="token punctuation">.</span><span class="token function">clearWatch</span><span class="token punctuation">(</span>watcherId<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//关闭追踪</span>
</code></pre><h2 id="demo1-原生geolocation-getcurrentposition"><a href="#demo1-原生geolocation-getcurrentposition" aria-hidden="true" class="header-anchor">#</a> Demo1: 原生geolocation.getCurrentPosition</h2><p>主要代码：</p><pre class="language-js"><code><span class="token function">onGetGeoLocation</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
	<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token string">'geolocation'</span> <span class="token keyword">in</span> navigator<span class="token punctuation">)</span> <span class="token punctuation">{</span>
		<span class="token keyword">let</span> center<span class="token punctuation">,</span>
			map<span class="token punctuation">,</span>
			marker<span class="token punctuation">,</span>
			options <span class="token operator">=</span> <span class="token punctuation">{</span>
			enableHighAccuracy<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
			maximumAge<span class="token punctuation">:</span> <span class="token number">10</span> <span class="token operator">*</span> <span class="token number">1000</span><span class="token punctuation">,</span>
			timeout<span class="token punctuation">:</span> <span class="token number">30</span> <span class="token operator">*</span> <span class="token number">1000</span><span class="token punctuation">,</span>
		<span class="token punctuation">}</span><span class="token punctuation">;</span>

		navigator<span class="token punctuation">.</span>geolocation<span class="token punctuation">.</span><span class="token function">getCurrentPosition</span><span class="token punctuation">(</span>position <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
			console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>position<span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token keyword">this</span><span class="token punctuation">.</span>errMsg <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span>
			<span class="token comment">//获取经纬度</span>
			center <span class="token operator">=</span> <span class="token punctuation">[</span>position<span class="token punctuation">.</span>coords<span class="token punctuation">.</span>longitude<span class="token punctuation">,</span> position<span class="token punctuation">.</span>coords<span class="token punctuation">.</span>latitude<span class="token punctuation">]</span><span class="token punctuation">;</span>
			<span class="token comment">//借助高德地图，通过经纬度显示位置</span>
			map <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">AMap<span class="token punctuation">.</span>Map</span><span class="token punctuation">(</span><span class="token string">'geolocation-container'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
						resizeEnable<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
						zoom<span class="token punctuation">:</span> <span class="token number">15</span><span class="token punctuation">,</span>
						center<span class="token punctuation">:</span> center
					<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
			marker <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">AMap<span class="token punctuation">.</span>Marker</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
				position<span class="token punctuation">:</span> center<span class="token punctuation">,</span>
				map<span class="token punctuation">:</span> map
			<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span> err <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
			console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
			errMsg <span class="token operator">=</span> err<span class="token punctuation">.</span>message <span class="token operator">||</span> <span class="token string">'出错'</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span> options<span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
		<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'您的浏览器不支持定位'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="geolocation-wrapper"><script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.6&amp;key=127225798a44ffd56967d469fe90b7da"></script><div class="btn"><button type="button" class="el-button el-button--default el-button--small"><!----><!----><span>获取我的位置</span></button><p class="color-red"></p></div><div id="geolocation-container"></div></div><h2 id="几点注意"><a href="#几点注意" aria-hidden="true" class="header-anchor">#</a> 几点注意</h2><h3 id="定位功能的主要影响因素"><a href="#定位功能的主要影响因素" aria-hidden="true" class="header-anchor">#</a> 定位功能的主要影响因素</h3><p>影响定位功能的主要因素是网络。</p><p>定位功能在移动网络环境里，是通过基站定位或者WIFI定位，获取定位信息成功率高，速度快。</p><p>若是在物理网络环境里，则有点复杂，首先，浏览器调用其对应的定位服务器的定位接口，然后定位服务器连接卫星，以用户的IP地址进行定位，再将定位信息返回浏览器传给用户。
由于涉及浏览器与定位服务器连接是否成功、定位服务器与卫星连接是否成功两方面因素的影响，固定位成功率很难保证。</p><p>GPS定位由于信号比较薄弱的关系定位成功率比较低，就算成功定位，需要花费的时间也很长，一般使用GPS定位的同时都会使用基站和WIFI辅助定位。</p><h3 id="定位精准度"><a href="#定位精准度" aria-hidden="true" class="header-anchor">#</a> 定位精准度</h3><p>关于定位精准度问题，由于绝大多数情况下，设备的定位信息是通过WIFI定位方式返回，误差一般在几十米之内。
(因为GPS定位耗时过长一般会被略过，基站定位精准度较低，优先级不如WIFI定位。)</p><p>而getCurrentPosition的配置参数里的<strong>enableHighAccuracy</strong>设置为true，仅仅是启用GPS定位，根据GPS定位的特性，应用中使用的机会不多。所以一般都用默认flase就足够了。</p><div class="warning custom-block"><p class="custom-block-title">注意</p><p>Chrome、IOS10+等已不再支持非安全域的浏览器定位请求</p></div><p>总之，单纯的浏览器定位由于种种原因，<strong>很——不——准</strong>😂 。</p><p>如果用于业务开发，可以借助第三方地图工具，如高德地图的AMap.Geolocation插件，融合了浏览器定位、高精度IP定位、安卓定位sdk辅助定位等多种手段，
提供了获取当前准确位置、获取当前城市信息、持续定位(浏览器定位)等功能。</p><h2 id="demo2-高德地图插件amap-geolocation"><a href="#demo2-高德地图插件amap-geolocation" aria-hidden="true" class="header-anchor">#</a> Demo2: 高德地图插件AMap.Geolocation</h2><p>主要代码：</p><pre class="language-js"><code><span class="token keyword">let</span> map <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">AMap<span class="token punctuation">.</span>Map</span><span class="token punctuation">(</span><span class="token string">'geolocation-container2'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
				resizeEnable<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
				zoom<span class="token punctuation">:</span> <span class="token number">15</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

	map<span class="token punctuation">.</span><span class="token function">plugin</span><span class="token punctuation">(</span><span class="token string">'AMap.Geolocation'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> geolocation <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">AMap<span class="token punctuation">.</span>Geolocation</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            enableHighAccuracy<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><span class="token comment">//是否使用高精度定位，默认:true</span>
            timeout<span class="token punctuation">:</span> <span class="token number">10000</span><span class="token punctuation">,</span>          <span class="token comment">//超过10秒后停止定位，默认：无穷大</span>
            buttonOffset<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">AMap<span class="token punctuation">.</span>Pixel</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token comment">//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)</span>
            zoomToAccuracy<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>      <span class="token comment">//定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false</span>
            buttonPosition<span class="token punctuation">:</span><span class="token string">'RB'</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        map<span class="token punctuation">.</span><span class="token function">addControl</span><span class="token punctuation">(</span>geolocation<span class="token punctuation">)</span><span class="token punctuation">;</span>
        geolocation<span class="token punctuation">.</span><span class="token function">getCurrentPosition</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        AMap<span class="token punctuation">.</span>event<span class="token punctuation">.</span><span class="token function">addListener</span><span class="token punctuation">(</span>geolocation<span class="token punctuation">,</span> <span class="token string">'complete'</span><span class="token punctuation">,</span> onComplete<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//返回定位信息</span>
        AMap<span class="token punctuation">.</span>event<span class="token punctuation">.</span><span class="token function">addListener</span><span class="token punctuation">(</span>geolocation<span class="token punctuation">,</span> <span class="token string">'error'</span><span class="token punctuation">,</span> onError<span class="token punctuation">)</span><span class="token punctuation">;</span>      <span class="token comment">//返回定位出错信息</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">onComplete</span> <span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">onError</span> <span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="geolocation-wrapper"><script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.6&amp;key=127225798a44ffd56967d469fe90b7da"></script><div class="btn"><button type="button" class="el-button el-button--default el-button--small"><!----><!----><span>获取我的位置</span></button></div><div id="geolocation-container2"></div></div><h2 id="参考资料"><a href="#参考资料" aria-hidden="true" class="header-anchor">#</a> 参考资料</h2><ul><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation" target="_blank" rel="noopener noreferrer">Using geolocation</a></li><li><a href="https://www.cnblogs.com/czf-zone/archive/2013/11/09/3415658.html" target="_blank" rel="noopener noreferrer">HTML5定位使用心得</a></li><li><a href="http://lbs.amap.com/api/javascript-api/reference/location/" target="_blank" rel="noopener noreferrer">高德开放平台</a></li></ul></div><div class="wx-wrapper" data-v-0de8a4bf><p class="wx-txt" data-v-0de8a4bf>欢迎关注</p><img src="http://pn4meizzc.bkt.clouddn.com/wxqr.png" class="wx-img" data-v-0de8a4bf></div><div class="beg-wrapper" data-v-1f1af99c><a href="javascript:;" class="btn show" data-v-1f1af99c><img src="http://pn4meizzc.bkt.clouddn.com/blogshang_log.png" data-v-1f1af99c></a><p class="shang-txt" data-v-1f1af99c>赏不赏，看您心情</p><img src="http://pn4meizzc.bkt.clouddn.com/blogWechatIMG35.jpeg" class="shangImg" data-v-1f1af99c></div><!----><div class="content page-nav"><p class="inner"><span class="prev">
        ← <a href="/blog/vuepress/js/useful_webapis_connection.html" class="prev">
          几个有用的Web API——网络状态API
        </a></span><span class="next"><a href="/blog/vuepress/js/speech_in_js_recognition.html">
          JS中的语音识别——Speech Recognition API
        </a> →
      </span></p></div></div></div></div>
    <script src="/blog/vuepress/assets/js/25.20165510.js" defer></script><script src="/blog/vuepress/assets/js/56.e030a6b2.js" defer></script><script src="/blog/vuepress/assets/js/61.4ec3f2eb.js" defer></script><script src="/blog/vuepress/assets/js/app.15770e34.js" defer></script>
  </body>
</html>
